<template>
	<view class="empty">
		<view class="empty-content">
			<!--<text class="cuIcon-goodsfill iconfont text-red"></text>-->
			<image class="empty-image" src="/static/mescroll-empty.png"></image>
			<text class="empty-content-info">{{info}}</text>
			<button v-show="showBtn" class="cu-btn round sm margin-top bg-cyan" @click="click">重新加载</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "npEmpty",
		props: {
			src: {
				type: String,
				default: 'empty'
			},
			showBtn: {
				type: Boolean,
				default: false
			},
			info: {
				type: String,
				default: ''
			},
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},

		data() {
			return {}
		},
		methods: {
			click() {
				this.$emit('click');
			}
		}
	}
</script>

<style lang="scss">
	.empty {
		/* #ifdef H5 */
		margin-top: calc(var(--status-bar-height) + 44px + 10px);
		/* #endif */
		/* #ifdef MP-WEIXIN */
		margin-top: 54px;
		/* #endif */
		.empty-content {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 20upx 0 80upx;

			.empty-content-info {
				font-size: 26upx;
				color: #ff5500;
			}

			.iconfont {
				font-size: 240upx;
				color: #ff5500;
			}

			&-image {
				width: 200upx;
				height: 200upx;
			}
		}
	}
	
	.empty-image {
		width: 280rpx;
		height: 280rpx;
	}
</style>
